<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form ref="queryFormRef" :model="queryData"  :inline="true">
                    <el-form-item label="选择生产产品" prop="procedureProduct">
                        <el-select v-model="queryData.procedureProduct" @change="handleProductChange">
                            <el-option value="customization_indent_cap" label="生日帽"></el-option>
                            <el-option value="customization_indent_tableware" label="蛋糕餐具"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择产品款式" prop="productStyle">
                        <el-select @change="handleQuery" v-model="queryData.productStyle">
                            <el-option v-for="item in productStyleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="danger" plain icon="Back" @click="handleClickBack">返回上级</el-button>
            </div>
        </transition>
        <el-card id="configure-card" shadow="never" :body-style="{height: '80vh'}">
            <el-carousel :height="`${carouselHeight}px`" :pause-on-hover="false" :autoplay="false">
                <el-carousel-item v-for="(group,groupIndex) in configureByGroup" :key="groupIndex">
                    <el-row :gutter="25">
                        <el-col v-for="item in group" :key="item.id" :span="8">
                            <div class="configure-item">
                                <el-image class="configure-img" @click="handleClickConfigure(item)" :src="item.imageUrl"></el-image>
                                <span class="configure-name">{{ item.combinationName }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getConfigureByStyleApi } from '@/api/sj/productManagement/productConfigure';
import useTagsViewStore from "@/store/modules/tagsView";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customization_indent_cap, customization_indent_tableware } = toRefs<any>(proxy?.useDict('customization_indent_cap','customization_indent_tableware'));
const router = useRouter();
const queryFormRef = ref<FormInstance>();
const queryData = ref({
    procedureProduct: undefined,
    productStyle: undefined
});
const productStyleOptions = ref<any[]>([]);
const configureList = ref<any[]>([]);
const configureByGroup = ref<any[]>([]);
const visitedViews = computed(() => useTagsViewStore().visitedViews);
const carouselHeight = ref(0);

const handleClickBack = () => {
    // console.log('visitedViews', visitedViews.value);
    // console.log(router.currentRoute.value);
    let pageIndex = undefined;
    const currentPage = visitedViews.value.filter((item: any,index: number)=>{
        if(item.path == router.currentRoute.value.fullPath){
            pageIndex = index;
        };
        return item.path == router.currentRoute.value.fullPath
    })[0];
    if(pageIndex){
        //@ts-ignore
        proxy?.$tab.closeOpenPage(visitedViews.value[pageIndex-1].fullPath)
    };
};

watch(()=>queryData.value.procedureProduct,(newData: any)=>{
    if(newData == 'customization_indent_cap'){
        productStyleOptions.value = customization_indent_cap.value;
    }else if(newData == 'customization_indent_tableware'){
        productStyleOptions.value = customization_indent_tableware.value;
    }else{
        productStyleOptions.value = [];
    };
});

const handleProductChange = (value: string) => {
    queryData.value.productStyle = undefined;
};

watch(()=>queryData.value.productStyle, async (newValue, oldValue) => {
    if(newValue !== oldValue){
        const { code,data } = await getConfigureByStyleApi(
            {...queryData.value,
                productStyle: newValue
            }
        );
        if(code == 200){
            configureList.value = data;
        };
    }
}, {deep: true});

/** 搜索按钮操作 */
const handleQuery = async () => {
    const { code,data } = await getConfigureByStyleApi(queryData.value);
    if(code == 200){
        configureList.value = data;
    };
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
};

/** 给轮播图分组 */
watch(()=>configureList.value, (newData) => {
    const groupNumber = Math.ceil(newData.length/3);
    const configureGroups = [];
    for(let i = 1;i <= groupNumber;i++){
        const group = newData.splice(0,3);
        configureGroups.push(group);
    };
    configureByGroup.value = [...configureGroups];
});

const handleClickConfigure = (item: any) => {
    let type = router.currentRoute.value.params.type;
    router.push(`/produceManagement/addCustomizedOrder/addOrderDetails/${item.id}/${type}`);
};

onMounted(()=>{
    const card = document.querySelector('#configure-card');
    console.dir(card);
    console.log(card?.clientHeight);
    carouselHeight.value = card?.clientHeight || 0;
});

</script>

<style lang="scss" scoped>
.search{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-carousel__item{
    display: flex;
    align-items: center;
}
.configure-item{
    
    .configure-img{
        border: solid 3px rgb(187, 187, 187);
        border-radius: 10px;
        cursor: pointer;
    }
    .configure-name{
        display: block;
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
    }
}
</style>